<template>
	<view :class="$attrs" class="bg-white radius-8 mx-16 px-16 py-12 mb-12" style="box-shadow:0px 0px 6px 0px rgba(0, 0, 0, 0.05);">
		<view class="flex justify-between item-center mb-12">
			<text class="text-color-regular fs-16 text-bold">我的订单</text>
			<view class="inline-flex item-center text-color-hint fs-12" @click="toOrder">全部<image class="w-3 h-6 ml-4" src="@/static/svg/arrow-stroke.svg"></image></view>
		</view>
		<view style="display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:12px 0;">
			<view v-for="(menu,i) in menus" :key="i" class="flex-col center" @click="onMenuClick(menu)">
				<uni-badge v-if="i==0||i==1" class="uni-badge-left-margin" :text="i==0?myPageInfo.waitPayOrderNum:myPageInfo.waitVerifyOrderNum" absolute="rightTop" :offset="[-3, -3]" size="small">
					<view class="flex-col center">
						<image class="mb-4 w-24 h-24" :src="menu.icon"></image>
						<text class="text-color-hint fs-12">{{menu.title}}</text>
					</view>
				</uni-badge>
				<!-- <uni-badge v-if="i==1" class="uni-badge-left-margin" :text="myPageInfo.waitVerifyOrderNum" absolute="rightTop" :offset="[-3, -3]" size="small">
					<view class="flex-col center">
						<image class="mb-4 w-24 h-24" :src="menu.icon"></image>
						<text class="text-color-hint fs-12">{{menu.title}}</text>
					</view>
					
				</uni-badge> -->
				<template v-else>
					<image class="mb-4 w-24 h-24" :src="menu.icon"></image>
					<text class="text-color-hint fs-12">{{menu.title}}</text>
				</template>	
				
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { useUserStore } from '@/stores/modules/user.js'
	
	const userStore = useUserStore()
	const props = defineProps({
		myPageInfo: {
			type: Object,
			required: true,
			default: {}
		}
	})
	const menus = ref([
		{
			title: '待支付',
			icon: '../../../static/svg/mine/menu-order-wait-pay.svg',
			path: '/pages/home/home?tab=1&orderState=1'
		},
		{
			title: '待核销',
			icon: '../../../static/svg/mine/menu-order-wait-check.svg',
			path: '/pages/home/home?tab=1&orderState=2'
		},
		{
			title: '已完成',
			icon: '../../../static/svg/mine/menu-order-finish.svg',
			path: '/pages/home/home?tab=1&orderState=3'
		},
		{
			title: '已关闭',
			icon: '../../../static/svg/mine/menu-order-close.svg',
			path: '/pages/home/home?tab=1&orderState=4'
		}
	])
	
	const onMenuClick = (menu) => {
		if (!userStore.isLogin) {
			uni.navigateTo({
				url: `/pagesA/login/login?from=${encodeURIComponent('/pages/home/home?tab=4')}`
			})
			return
		}
		if (menu && menu.path) {
			uni.navigateTo({
				url: menu.path
			})
		}
	}
	
	const toOrder = () => {
		if (!userStore.isLogin) {
			uni.navigateTo({
				url: `/pagesA/login/login?from=${encodeURIComponent('/pages/home/home?tab=4')}`
			})
			return
		}
		uni.navigateTo({
			url: '/pages/home/home?tab=1'
		})
	}
</script>
